<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form" :model="formModel" label-width="160px" :rules="rules">
      <el-row style="text-align: center">
        <el-col :span="12">
          <el-form-item label="合格证编号:" prop="qualifiedCertificateNo">
            <el-input v-model="formModel.qualifiedCertificateNo" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品公告号:" prop="cpggh">
            <el-input v-model="formModel.cpggh" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公告批次:" prop="ggpc">
            <el-input v-model="formModel.ggpc" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公告生效日期:" prop="ggsxrq">
            <el-date-picker
              v-model="formModel.ggsxrq"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="双积分配置ID:" prop="sjfpzid">
            <el-input v-model="formModel.sjfpzid" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否使用车型年份:" prop="isCxnf">
            <hey-select v-model="formModel.isCxnf" :clearable="false" clcd="ind_cd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆状态信息:" prop="clztxxKey">
            <hey-select v-model="formModel.clztxxKey" :clearable="false" clcd="clztxx_cd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆分类:" prop="clflKey">
            <hey-select v-model="formModel.clflKey" :clearable="false" clcd="clfl_cd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="底盘ID:" prop="dpid">
            <el-input v-model="formModel.dpid" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="底盘合格证编号:" prop="dphgzbh">
            <el-input v-model="formModel.dphgzbh" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="底盘型号:" prop="dpxh">
            <el-input v-model="formModel.dpxh" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆品牌:" prop="clpp">
            <el-input v-model="formModel.clpp" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆名称:" prop="clmc">
            <el-input v-model="formModel.clmc" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆型号:" prop="clxh">
            <el-input v-model="formModel.clxh" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发动机型号:" prop="fdjxh">
            <el-input v-model="formModel.fdjxh" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最高车速(KM/H):" prop="zgcs">
            <el-input v-model="formModel.zgcs" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆制造企业名称:" prop="clzzqymc">
            <el-input v-model="formModel.clzzqymc" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="燃料种类:" prop="rlzl">
            <el-input v-model="formModel.rlzl" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纯电动标记:" prop="vehCddbj">
            <hey-select v-model="formModel.vehCddbj" :clearable="false" clcd="ind_cd" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排放标准:" prop="pfbz">
            <el-input v-model="formModel.pfbz" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排量(ML):" prop="pl">
            <el-input v-model="formModel.pl" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="功率(KW):" prop="gl">
            <el-input v-model="formModel.gl" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="外廓长:" prop="wkc">
            <el-input v-model="formModel.wkc" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="外廓宽:" prop="wkk">
            <el-input v-model="formModel.wkk" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="外廓高:" prop="wkg">
            <el-input v-model="formModel.wkg" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货厢内部长:" prop="hxnbc">
            <el-input v-model="formModel.hxnbc" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货厢内部宽:" prop="hxnbk">
            <el-input v-model="formModel.hxnbk" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货厢内部高:" prop="hxnbg">
            <el-input v-model="formModel.hxnbg" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="钢板弹簧片数(片):" prop="gbthps">
            <el-input v-model="formModel.gbthps" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="轮胎数:" prop="lts">
            <el-input v-model="formModel.lts" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="轴距(mm):" prop="zj">
            <el-input v-model="formModel.zj" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="前轮距(mm):" prop="qlj">
            <el-input v-model="formModel.qlj" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="后轮距(mm):" prop="hlj">
            <el-input v-model="formModel.hlj" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="转向形式:" prop="zxxs">
            <el-input v-model="formModel.zxxs" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="轴荷(kg):" prop="zh">
            <el-input v-model="formModel.zh" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="轴数:" prop="zs">
            <el-input v-model="formModel.zs" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="额定载质量(kg):" prop="hdzzl">
            <el-input v-model="formModel.hdzzl" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总质量:" prop="zzl">
            <el-input v-model="formModel.zzl" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="整备质量:" prop="zbzl">
            <el-input v-model="formModel.zbzl" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="半挂车鞍座最大允许总质量(KG):" prop="bgcazzdyxzzl" label-width="220px">
            <el-input v-model="formModel.bgcazzdyxzzl" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="载质量利用系数:" prop="zzllyxs">
            <el-input v-model="formModel.zzllyxs" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="准牵引总质量(KG):" prop="zqyzzl">
            <el-input v-model="formModel.zqyzzl" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="额定载客:" prop="edzk">
            <el-input v-model="formModel.edzk" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶室准乘人数:" prop="jsszcrs">
            <el-input v-model="formModel.jsszcrs" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接近角/离去角（°）:" prop="jjjLqj">
            <el-input v-model="formModel.jjjLqj" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="前悬/后悬（mm）:" prop="qxHx">
            <el-input v-model="formModel.qxHx" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="前制动方式:" prop="qzdfs">
            <el-input v-model="formModel.qzdfs" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="后制动方式:" prop="hzdfs">
            <el-input v-model="formModel.hzdfs" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="前制动操作方式:" prop="qzdczfs">
            <el-input v-model="formModel.qzdczfs" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="后制动操作方式:" prop="hzdczfs">
            <el-input v-model="formModel.hzdczfs" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="油耗:" prop="vehYh">
            <el-input v-model="formModel.vehYh" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="转向轴个数:" prop="vehZxzgs">
            <el-input v-model="formModel.vehZxzgs" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆生产单位地址:" prop="clscdwdz">
            <el-input v-model="formModel.clscdwdz" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆生产单位名称:" prop="clscdwmc">
            <el-input v-model="formModel.clscdwmc" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="企业标准:" prop="qybz">
            <el-input v-model="formModel.qybz" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="车辆制造企业其他信息:" prop="clzzqyqtxx">
            <el-input v-model="formModel.clzzqyqtxx" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="status">
            <hey-select v-model="formModel.status" clcd="is_effective_cd" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="submit-area">
      <el-col :span="24">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'QualifiedCertificateMnt',
  props: ['pageType', 'editData'],
  data() {
    return {
      // 日期组件
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      // 只读
      readonly: false,
      formModel: {
        qualifiedCertificateId: '',
        qualifiedCertificateNo: '',
        cpggh: '',
        ggpc: '',
        ggsxrq: '',
        sjfpzid: '',
        qydm: '',
        qyid: '',
        isCxnf: '1',
        clztxxKey: '',
        clflKey: '',
        dpid: '',
        dphgzbh: '',
        dpxh: '',
        clpp: '',
        clmc: '',
        clxh: '',
        fdjxh: '',
        zgcs: '',
        clzzqymc: '',
        rlzl: '',
        vehCddbj: '0',
        pfbz: '',
        pl: '',
        gl: '',
        wkc: '',
        wkk: '',
        wkg: '',
        hxnbc: '',
        hxnbk: '',
        hxnbg: '',
        gbthps: '',
        lts: '',
        zj: '',
        qlj: '',
        hlj: '',
        zxxs: '',
        zh: '',
        zs: '',
        hdzzl: '',
        zzl: '',
        zbzl: '',
        bgcazzdyxzzl: '',
        zzllyxs: '',
        zqyzzl: '',
        edzk: '',
        jsszcrs: '',
        jjjLqj: '',
        qxHx: '',
        qzdfs: '',
        hzdfs: '',
        qzdczfs: '',
        hzdczfs: '',
        vehYh: '',
        vehZxzgs: '',
        clscdwdz: '',
        clscdwmc: '',
        qybz: '',
        clzzqyqtxx: '',
        status: '1'
      },
      // 老数据
      oldFormModel: {
      },
      rules: {}
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$form = this.$refs.form
      const { pageType, editData, formModel } = this
      if (pageType !== 'add') {
        this.assignData(editData, formModel)
        this.oldFormModel = JSON.parse(JSON.stringify(this.formModel))
        this.readonly = true
      }
      this.initRules()
    },
    initRules() {
      const REQUIRED_MSG = this.CONST.REQUIRED_MSG
      this.rules = {
        qualifiedCertificateNo: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        clztxxKey: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        clflKey: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        isCxnf: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        vehCddbj: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        status: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }]
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    // 提交新增或修改
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.formModel.qualifiedCertificateId !== '') {
            // 判断是否修改
            if (JSON.stringify(this.formModel) !== JSON.stringify(this.oldFormModel)) {
              const tip = '修改成功！'
              const url = '/qualifiedCertificate/update'
              this.post(url, this.formModel).then(res => {
                this.$info(tip, () => {
                  this.$emit('mntSuc', res)
                  this.closeDialog()
                })
              })
            } else {
              this.$emit('mntSuc')
              this.closeDialog()
            }
          } else {
            const url = '/qualifiedCertificate/save'
            this.post(url, this.formModel).then(res => {
              const tip = '新增成功！'
              this.$info(tip, () => {
                this.$emit('mntSuc', res)
                this.closeDialog()
              })
            })
          }
        }
      })
    },
    closeDialog() {
      this.$parent.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
